<!DOCTYPE html>
<html lang="en">
<head>
    <title>公司管理层</title>
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="Cache-Control" content="no-store, must-revalidate">
    <meta http-equiv="expires" content="Wed, 26 Feb 1997 08:21:57 GMT">
    <meta http-equiv="expires" content="-1">
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"
          name="viewport">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        [v-cloak] {
            display: none;
        }

        * {
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
        }

        body {
            margin: 1px;
        }

        table {
            border-spacing: 0;
            border-collapse: collapse;
            display: table;
        }

        table.text-center, table.text-center td, table.text-center th {
            text-align: center;
            font-size: x-small;
        }

        .table-bordered > thead > tr > th, .table-bordered > tbody > tr > th, .table-bordered > tfoot > tr > th, .table-bordered > thead > tr > td, .table-bordered > tbody > tr > td, .table-bordered > tfoot > tr > td {
            border: 1px solid #cbcbcd;
        }

        .table th {
            background: yellow;
        }

        table td {
            padding-top: 5px;
            padding-bottom: 5px;
        }

        .table-bordered {
            border: 1px solid #cbcbcd;
        }

        .table {
            width: 100%;
            max-width: 100%;
            margin-bottom: 20px;
        }


    </style>
</head>
<body>
<section class="content" id="app">
    <div v-cloak style="text-align: center;font-size: x-small;margin: 6px 0">目标:（{{visitType == 1?
        regionInfo.faceInfo.targetDay:regionInfo.telInfo.targetDay}}），
        完成:（{{visitType == 1? regionInfo.faceInfo.finishDay:regionInfo.telInfo.finishDay}}）
    </div>
    <table class="table table-hover table-bordered text-center ">
        <thead>
        <tr>
            <template v-if="visitType==1">
                <th style="width:35px">面访<br/>排名
                    <template v-if="hour<8 && isDay"><br/>(昨日)</template>
                </th>
            </template>
            <template v-else>
                <th style="width:35px">电访<br/>排名
                    <template v-if="isDay"><br/>(昨日)</template>
                </th>
            </template>

            <!--<template v-if="visitType==1">-->
            <!--<th style="width:40px">目标-->
            <!--<template v-if="hour<8 && isDay"><br/>(昨日)</template>-->
            <!--</th>-->
            <!--</template>-->
            <!--<template v-else>-->
            <!--<th style="width:40px">目标-->
            <!--<template v-if="isDay"><br/>(昨日)</template>-->
            <!--</th>-->
            <!--</template>-->

            <template v-if="visitType==1">
                <th style="width:40px">完成
                    <template v-if="hour<8 && isDay"><br/>(昨日)</template>
                </th>
            </template>
            <template v-else>
                <th style="width:40px">完成
                    <template v-if="isDay"><br/>(昨日)</template>
                </th>
            </template>

            <template v-if="visitType==1">
                <th style="width:40px">完成率
                    <template v-if="hour<8 && isDay"><br/>(昨日)</template>
                </th>
            </template>
            <template v-else>
                <th style="width:40px">完成率
                    <template v-if="isDay"><br/>(昨日)</template>
                </th>
            </template>

            <th style="width:60px">区域<br/>经理</th>
            <th style="width:60px">大区<br/>经理</th>
            <template v-if="!isDay">
                <th style="width:35px">出勤<br/>天数</th>
                <th style="width:35px">日均<br/>完成</th>
            </template>
            <th style="width:77px">大区</th>
        </tr>
        </thead>
        <tbody v-cloak>
        <tr v-for="(item,i) in sendData">
            <td>{{item.rownum}}</td>
            <td>{{item.complete==""?"0":item.complete}}</td>
            <td>{{item.completionRate}}%</td>
            <template v-if="isGo(item)">
                <td style="color:#169BD5;cursor: pointer" @click="lookInterview(item,'day')">
                    {{item.managerName}}
                </td>
            </template>
            <template v-else>
                <td> {{item.managerName}}</td>
            </template>
            <td>{{item.bigmanagerName}}</td>
            <template v-if="!isDay">
                <td>{{item.signManagerNum==""?"0":item.signManagerNum}}</td>
                <td>{{item.averageComplete==""?"-":item.averageComplete}}</td>
            </template>

            <td>{{item.bigRegionName}}</td>
        <tr>
            <td>合计</td>
            <td>{{allDate[0].allComplete}}</td>
            <td>{{allDate[0].completionRate}}</td>
            <td>-</td>
            <td>-</td>
            <td v-if="!isDay">{{allDate[0].signManagerNum}}</td>
            <td v-if="!isDay">{{allDate[0].averageComplete}}</td>
            <td>/</td>
        </tr>
        </tr>
        </tbody>
    </table>
    <!-- /.box-body -->
    <div class="row">
        <div id="container" class="col-lg-6 col-xs-6" style="height: 400px; margin: 0 auto"></div>
    </div>
</section>
<!--JQ-->
<script src="https://file.ggxqce.com/web/jquery-2.2.3.min.js"></script>
<script src="https://file.ggxqce.com/web/vue.min.js"></script>
<script src="../../../dist/plugins/highcharts/highcharts.js"></script>
<script src="/dist/js/oaApp.js"></script>
<script type="text/javascript">
    function getUrlParam(name) {
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
        var r = window.location.search.substr(1).match(reg);  //匹配目标参数
        if (r != null) return unescape(r[2]);
        return null; //返回参数值
    }

    function isDay(time) {
        //2018-01-01
        if (time.length > 8) {
            return true
        } else {
            return false
        }
    }

    var app = new Vue({
            el: '#app',
            data: {
                op: getUrlParam('op'),
                dateTime: getUrlParam('dateTime'),
                isDay: isDay(getUrlParam('dateTime')),
                visitType: getUrlParam('visitType'),//0电访 1面访
                sendData: [],
                regionIds: [],
                regionInfo: {
                    "telInfo": {"finishDay": "", "targetDay": ""},
                    "faceInfo": {"finishDay": "", "targetDay": ""}
                },
                hour: new Date().getHours(),
                allDate: [{"allComplete": "", "completionRate": ""}, {
                    "allComplete": "",
                    "completionRate": ""
                }]
            },
            methods: {
                lookInterview: function (item, type) {
                    prompt(JSON.stringify(item));
                },
                showChart: function (sendData) {
                    //图表
                    var color = this.visitType == 1 ? ['#96d4a3'] : ['#7cb5e3']
                    var chart = Highcharts.chart('container', {
                        chart: {
                            type: 'column'
                        },
//                        colors: color,
                        legend: {
                            enabled: false,
                            align: 'right', //水平方向位置
                            verticalAlign: 'top', //垂直方向位置
                            floating: true,
                            x: 0, //距离x轴的距离
                            y: 10 //距离Y轴的距离
                        },
                        credits: {enabled: false},
                        title: {
                            text: '',
                        },
                        subtitle: {
                            text: ''
                        },
                        xAxis: {
                            categories: sendData.regionName,
                            crosshair: true
                        },
                        yAxis: {
                            min: 0,
                            title: {
                                text: '数量 (个)'
                            }
                        },
                        tooltip: {
                            headerFormat: '<span style="font-size:10px">{point.key}:{point.y}</span><table>',
                            pointFormat: '',
                            footerFormat: '</table>',
                            shared: true,
                            useHTML: true
                        },
                        plotOptions: {
                            column: {
                                pointPadding: 0.2,
                                borderWidth: 0
                            }
                        },
                        series: [{
                            name: this.visitType == 1 ? "面访" : "电访",
                            data: this.visitType == 1 ? sendData.faceValue : sendData.telValue
                        }]
                    });
                }
                ,
                getCount: function (arr, key) {
                    var number = 0;
                    for (var i = arr.length - 1; i >= 0; i--) {
                        number += (arr[i][key] ? arr[i][key] : 0)

                    }
                    return number;
                },
                getAll: function (arr, type) {
                    this.allDate[0].target = this.getCount(arr, "target");
                    this.allDate[0].allComplete = this.getCount(arr, "complete");
                    this.allDate[0].signManagerNum = this.getCount(arr, "signManagerNum");
                    this.allDate[0].averageComplete = (this.allDate[0].allComplete / this.allDate[0].signManagerNum).toFixed(2);
                    if (this.allDate[0].target == 0) {
                        this.allDate[0].completionRate = "0.00%";
                    } else {
                        this.allDate[0].completionRate = (this.allDate[0].allComplete / this.allDate[0].target * 100).toFixed(2) + "%";
                    }
                },
                isHasRightOp: function (eName) {
                    console.log($.inArray(eName, this.regionIds) > -1)
                    return $.inArray(eName, this.regionIds) > -1;
                }
                ,
                isGo: function (item) {
                    var that = this;
                    //区域支持 大区经理
                    if (this.op == 1) {
                        if (that.isHasRightOp(item.regionId)) {
                            return true
                        } else {
                            return false
                        }
                    } else {
                        return true;
                    }
                }
            },
            mounted: function () {
                var that = this;
                var data = {
                    userId: getUrlParam('userId'),
                    dateTime: getUrlParam('dateTime'),
                    companyId: getUrlParam('companyId'),
                    type: getUrlParam('visitType'),//0电访 1面访
                    isApp: "1"
                };
                //查询用户有哪些权限
                $.ajax({
                    url: server.ip + urlConfig.crm.customer.getById,
                    contentType: 'application/json;charset=utf-8',
                    async: true,
                    type: "POST",
                    data: JSON.stringify(data),
                    success: function (r) {
                        var res = JSON.parse(r)
                        for (var i = 0; i < res.data.sendData.length; i++) {
                            that.regionIds.push(res.data.sendData[i].regionId);
                        }
                    },
                    error: function (e) {
                        alert(e.responseText)
                    }
                });
                //目标完成
                $.ajax({
                    url: server.ip + urlConfig.crm.customer.getRegionInfo,
                    contentType: 'application/json;charset=utf-8',
                    type: "POST",
                    data: JSON.stringify(data),
                    success: function (r) {
                        var res = JSON.parse(r)
                        that.regionInfo = res.data.sendData
                    },
                    error: function (e) {
                        alert(e.responseText)
                    }
                });

                //报表
                $.ajax({
                    url: server.ip + urlConfig.crm.customer.getRegionByManage,
                    contentType: 'application/json;charset=utf-8',
                    type: "POST",
                    data: JSON.stringify(data),
                    success: function (r) {
                        var res = JSON.parse(r)
                        that.sendData = res.data.sendData
                        that.getAll(that.sendData);
                    },
                    error: function (e) {
                        alert(e.responseText)
                    }
                });
                //获取柱状图
                $.ajax({
                    url: server.ip + urlConfig.crm.customer.getRegionByManageChart,
                    contentType: 'application/json;charset=utf-8',
                    async: true,
                    type: "POST",
                    data: JSON.stringify(data),
                    success: function (r) {
                        var res = JSON.parse(r)
                        that.showChart(res.data.sendData)
                    },
                    error: function (e) {
                        alert(e.responseText)
                    }
                });
            }
        })
    ;
</script>

</body>
</html>